<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>教务数据分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/public.css" rel="stylesheet" type="text/css"/>
    <style>
        #myTab{
            margin-right: 100px;
        }
        #myTab li{
            float: right;
            margin-left: 20px;
        }
        #myTab li:nth-of-type(3){
            border-bottom: 2px solid #3398DB;
        }
        #myTab li:nth-of-type(1){
            margin-right: 100px;
        }
    </style>
    <script src="__PUBLIC__/js/echarts.common.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div class="layui-conter" style="height: 100%">
    <div class="layui-col-md12" style="height: 100%">
        <div class="navigation" >
            <span>数据></span><span>数据分析></span><span>教务数据分析</span>
        </div>

        <div class="white-conter" style="height: 90%" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="title-blue"><b>续报比</b></div>
                </div>
            </div>
            <div class="layui-card-body" style="margin-left: 5%;margin-top: 20px;">
                <form class="layui-form" action="" lay-filter="component-form-group">
                    <div class=" layui-row" style="margin-top: 20px">
                        <div class=" layui-col-xs3" style="width: 20%;">
                            <label class="layui-form-label">校区选择：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="quiz3">
                                    <option value="" selected="">普陀校区</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <ul id="myTab" class="nav nav-tabs" style="height: 80%;">
                <li class="active">
                    <a href="#chart1" data-toggle="tab">全年</a>
                </li>
                <li>
                    <a href="#container" data-toggle="tab" onclick="javascript:chartresize()">本月</a>
                </li>
                <li>
                    <a href="#chart2" data-toggle="tab" onclick="javascript:chartresize()" style="color:#3398DB;">今日</a>
                </li>
                <div class="tab-content" style="height: 100%;">
                    <div class="tab-pane fade in active" id="chart1" ></div>
                    <div class="tab-pane fade" id="container" style="height: 100%;"></div>
                    <div class="tab-pane fade in active" id="chart1"></div>
                </div>
            </ul>
        </div>

    </div>
</div>
</body>
<script>
    var dom = document.getElementById("container");
    //自适应宽高
    var myChartContainer = function () {
        dom.style.width = window.innerWidth-160 +'px';
        // dom.style.height = window.innerHeight+'px';
    };

    myChartContainer();

    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    option = {
        title : {
            // text: '某站点用户访问来源',
            // subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            top:'50%',
            left:'5%',
            data: ["异动45个",'续报135个','上期合计学员180个'],
            // height:500,
            // width:500
            textStyle:{
                fontSize:24,
                padding:10,
            }
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '80%',
                center: ['50%', '50%'],
                selectedOffset:50,
                data:[
                    {value:85, name:'续报135个',
                        itemStyle:{
                            color:"#ffc600"
                        },label:{
                        color:"#000",
                        fontSize:40,
                        formatter:"{d}%",

                    },selected:true},
                    {value:15, name:'异动45个',
                        itemStyle:{
                            color:"#579fe9"
                        },label:{
                        color:"#000",
                        fontSize:40,
                        formatter:"{d}%",
                    }
                    },
                    {value:0, name:'上期合计学员180个',
                        itemStyle:{
                            color:"#666"
                        },
                        label:{
                            show:false
                        },
                        labelLine:{
                            show:false
                        }

                    },
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }

            }
        ]
    };




    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }


    //浏览器大小改变时重置大小
    window.onresize = function () {
        myChartContainer();
        myChart.resize();
    };
</script>
<script src="__PUBLIC__/js/layui.all.js"></script>
</html>